<script setup lang="ts">
import axios from 'axios';
import { onMounted, ref } from 'vue';
import { Channel, ChannelResData } from '../types/index';
import { useChannelStore } from '../store/channel';
import { storeToRefs } from 'pinia';

const channelStore = useChannelStore();
const { activeId } = storeToRefs(channelStore);

//#region 列表数据展示
const list = ref<Channel[]>([]);
onMounted(async () => {
  const res = await axios.request<ChannelResData>({
    method: 'GET',
    url: 'http://geek.itheima.net/v1_0/channels',
  });
  list.value = res.data.data.channels;
});
//#endregion
</script>

<template>
  <div class="channel-nav">
    <nav class="list">
      <a
        class="item"
        :class="{ active: v.id === activeId }"
        href="javascript:;"
        v-for="v of list"
        :key="v.id"
        @click="channelStore.setActiveId(v.id)"
      >
        {{ v.name }}
      </a>
    </nav>
  </div>
</template>
